<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          @click="handleDeleteBatch"
          size="mini"
          >批量删除</el-button
        >
        <el-input
          v-model="keyWord"
          placeholder="筛选角色"
          class="handle-input mr10"
          size="mini"
        ></el-input>
        <el-button type="primary" @click="addVisible = true" size="mini"
          >添加角色</el-button
        >
      </div>
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        border
        ref="multipleTable"
        size="mini"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          label="角色代码"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="角色名称"
          prop="nameRn"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              @click="updateMenu(scope.row)"
              type="text"
              size="small"
              >管理权限</el-button
            >
            <el-button @click="handleUpdate(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row)" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="total, prev, pager, next"
          :current-page="current"
          :page-size="size"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog title="添加角色" :visible.sync="addVisible" width="700px" center>
      <el-form
        ref="addForm"
        :model="addForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="角色代码">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="addForm.nameRn"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addRow">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="updateVisible" width="700px" center>
      <el-form
        ref="updateForm"
        :model="updateForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="角色代码">
          <el-input v-model="updateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="updateForm.nameRn"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateRow">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="delVisible" width="350px" center>
      <div class="del-dialog-cnt" align="center">
        删除不可恢复，是否确定删除？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取消</el-button>
        <el-button type="primary" @click="delRow">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mixin } from '../mixins'
import { SPACE, selectPage, selectPageByWord, insert, update, deleteByIds } from '../api/baseApi'

export default {
  mixins: [mixin],
  data() {
    return {
      size: 5,
      tableData: [
        { id: 1, name: 'a', nameRn: 'aa' },
        { id: 2, name: 'b', nameRn: 'bb' }
      ],
      addForm: { id: 1, name: 'a', nameRn: 'aa' },
      updateForm: { id: 1, name: 'a', nameRn: 'aa' }
    }
  },
  computed: {
    // 计算当前表格中的数据
    data() {
      return this.tableData.slice((this.current - 1) * this.size, this.current * this.size)
    }
  },
  watch: {
    keyWord: function () {
      this.findRow()
    }
  },
  mounted() {
    this.findRow()
  },
  methods: {
    // 添加
    addRow() {
      insert(SPACE.role, this.addForm).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.tableData.unshift(this.addForm)
          this.addVisible = false
        } else {
          this.showError()
        }
      })
    },
    // 删除
    delRow() {
      console.log(this.ids)
      deleteByIds(SPACE.role, this.ids).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.findRow()
        } else {
          console.log(res)
          this.showError()
        }
      })
      this.delVisible = false
    },
    // 修改
    updateRow() {
      update(SPACE.role, this.updateForm).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.findRow()
          this.updateVisible = false
        } else {
          console.log(res)
          this.showError()
        }
      })
    },
    // 查找列表
    async findRow() {
      if (this.keyWord === '') {
        selectPage(SPACE.role, this.current, this.size).then(res => {
          this.tableData = res.state === 200 ? res.data.records : []
        })
      } else {
        selectPageByWord(SPACE.role, this.current, this.size, this.keyWord).then(res => {
          this.tableData = res.state === 200 ? res.data.records : []
        })
      }
    },
    // 管理权限
    updateMenu(row) {
      console.log('管理权限,敬请期待')
    }
  }
}

</script>

<style scoped>
</style>
